<script setup name="Charts">
import * as echarts from 'echarts';
import { useWindowSizeFn } from '@/hooks/event/useWindowSizeFn';

const chart = shallowRef();

const [ start, stop ] = useWindowSizeFn(() => {
  console.log('尺寸变了');
  if(chart.value){
    chart.value.resize();
  }
}, 120)

const echartsOption = {
  title: {
    text: 'ECharts 入门示例',
    subtext: '纯属虚构',
  },
  tooltip: {},
  legend: {
    data: ['销量']
  },
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
};

const initEcharts = () => {
  chart.value = echarts.init(echartsRef.value);
  chart.value.setOption(echartsOption);
}

const echartsRef = ref(null);

onMounted(() => {
  initEcharts();
})
onActivated(() => {
  start();
})
onDeactivated(() => {
  stop();
})

</script>

<template>
  <page-wrapper>
    <div class="w-full h-full">
      <div class="w-1/2 h-1/2" ref="echartsRef">
      </div>
  </div>
  </page-wrapper>
  
  
</template>

<style lang="less" scoped>
</style>